import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'
import './index.less';

class Arrow extends PureComponent {

  static propTypes = {
    direct: PropTypes.string,
    size: PropTypes.number,
    color: PropTypes.string,
  }

  componentDidMount () {
    this.initArrow();
  }

  // 初始化箭头
  initArrow () {
    const { direct } = this.props;
    const size = this.props.size || 6;
    const color = this.props.color || '#fff';
    switch (direct) {
    case 'right':
      this.arrow.style.borderLeft = `${size}px solid ${color}`;
      this.arrow.style.borderRight = `${size}px solid transparent`;
      this.arrow.style.borderTop = `${size}px solid transparent`;
      this.arrow.style.borderBottom = `${size}px solid transparent`;
      break;
    case 'left':
      this.arrow.style.borderRight = `${size}px solid ${color}`;
      this.arrow.style.borderLeft = `${size}px solid transparent`;
      this.arrow.style.borderTop = `${size}px solid transparent`;
      this.arrow.style.borderBottom = `${size}px solid transparent`;
      break;
    case 'bottom':
      this.arrow.style.borderTop = `${size}px solid ${color}`;
      this.arrow.style.borderLeft = `${size}px solid transparent`;
      this.arrow.style.borderRight = `${size}px solid transparent`;
      this.arrow.style.borderBottom = `${size}px solid transparent`;
      break;
    case 'top':
      this.arrow.style.borderBottom = `${size}px solid ${color}`;
      this.arrow.style.borderLeft = `${size}px solid transparent`;
      this.arrow.style.borderRight = `${size}px solid transparent`;
      this.arrow.style.borderTop = `${size}px solid transparent`;
      break;
    default:
      this.arrow.style.borderBottom = `${size}px solid ${color}`;
      this.arrow.style.borderLeft = `${size}px solid transparent`;
      this.arrow.style.borderRight = `${size}px solid transparent`;
      this.arrow.style.borderTop = `${size}px solid transparent`;
    }
  }

  render () {
    return (
      <>
        <div ref={(arrow) => {this.arrow = arrow;}} className="arrow" />
      </>
    );
  }
}

export default Arrow;
